<template>
  <div id="app">
    <head-index></head-index>
    <!--<div :class="{'head-bg-wrap': isActivity}">-->
    <!--<head-nav :isActivity="isActivity"></head-nav>-->
    <!--</div>-->
    <template v-if="!isActivity">
      <div class="content">
        <router-view v-if="isRouterAlive"></router-view>
      </div>
      <route-loading></route-loading>
      <Foot ></Foot>
    </template>
    <a id="ls-back-to-top" title="Back to top" class="ls-back-to-top" role="button">
      <span class="accessibility-hidden"></span>
    </a>
  </div>
</template>

<script type="text/ecmascript-6">
  import headIndex from 'base/head/head'
  // import headNav from 'base/head-nav/head-nav'
  import Foot from 'components/foot-nav/foot-nav'
  import RouteLoading from 'base/route-loading/route-loading'
  import {mapGetters} from 'vuex'

  export default {
    data() {
      return {
        isRouterAlive: true,
        footShow: true
      }
    },
    computed: {
      ...mapGetters(['isActivity'])
    },
    created() {

    },
    provide() {
      return {
        reload: this.reload,
        showFooter: this.showFooter,
        hideFooter: this.hideFooter
      }
    },
    mounted() {

    },
    methods: {
      reload() {
        this.isRouterAlive = false
        this.$nextTick(() => (this.isRouterAlive = true))
      },
      showFooter() {
        this.footShow = true
      },
      hideFooter() {
        this.footShow = false
      }
    },
    components: {
      headIndex,
      Foot,
      RouteLoading
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"

  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #18823a !important;
  }

  #app
    margin 0 auto
    color #333

  .content
    max-width: 1080px
    margin: 0 auto

  .ls-back-to-top
    background: #000
    position: fixed
    line-height: 1
    opacity: .7
    display: none
    right: 35px
    bottom: 30%
    width: 31px;
    height: 31px;
    cursor: pointer
    font-size: 20px

  .accessibility-hidden
    position: absolute;
    border: 11px solid transparent;
    border-top: 0;
    top: 9px;
    left: 5px;
    border-bottom-color: #fff;

    &:before
      content: '';
      border: 15px solid transparent;
      position: absolute;
      left: -15px;
      top: 4px;
      border-top: 0;
      border-bottom-color: #000;

  .head-bg-wrap
    background: url('../static/img/head-bg.jpg')
    background-size: cover
    margin-bottom: -1px

</style>
